/* eslint-disable array-callback-return */
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { connect } from 'dva';
import { urlParse } from '@/utils/utils';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BatchUpload from '../../components/BatchUpload/Index';
import StepItem from '../../components/BatchUpload/StepItem';
import SelectInvoiceData from './SelectInvoiceData';
import PerfectInvoiceInfo from './PerfectInvoiceInfo';
import InvoiceFinish from './InvoiceFinish';


@connect(({ invbycustsupp, customerbilling, loading }) => ({
  formFieldsValue: customerbilling.formFieldsValue,
  loading: loading.models.customerbilling,
  isGoBack: invbycustsupp.isGoBack,
}))
@Form.create()
class BillingList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentStep: 0, // 当前步数
      invoiceState: null, // 1是客户开票，2是供应商开票，3是供应商系统的开票
      InvoiceId: [], // 选择的账单id
      contIdList: [], // 选择的合同id
      costCenterIdList: [], // 选择的成本中心id
      custSuppId: null, // 选择的客户id或者供应商id
      invApplyData: {}, // 结果页的数据
    };
  }

  // 组件dom渲染完成
  componentDidMount() {
    const { location } = this.props;
    const tempUrl = location.search;
    const { invoice } = urlParse(tempUrl);
    this.setState({
      invoiceState: invoice,
    });
    const { form } = this.props;
    form.resetFields(['custIds', 'billYmModal']);
  }

  componentWillUnmount() {
    const { form } = this.props;
    form.resetFields(['custIds', 'billYmModal']);
  }

  // 设置当前位置
  setCurrentstep = (currentStep, InvoiceId, custSuppId, contIdList, costCenterIdList) => {
    const { dispatch } = this.props;
    this.setState({ currentStep, InvoiceId, custSuppId, contIdList, costCenterIdList });
    dispatch({
      type: 'invbycustsupp/updateModelData',
      payload: {
        isGoBack: true,
      },
    });
  };

  // 点击下一步
  nextFinish = invApplyData => {
    const temp = invApplyData;
    temp.money = 0;
    invApplyData.invApplyBillOptVo.map(item => {
      temp.money += item.invAmountSum;
    });
    this.setState(
      {
        invApplyData,
      },
      () => {
        const { currentStep } = this.state;
        this.setCurrentstep(currentStep + 1);
      }
    );
  };

  render() {
    const { location } = this.props;
    const {
      currentStep,
      invoiceState,
      InvoiceId,
      custSuppId,
      contIdList,
      costCenterIdList,
      invApplyData,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <BatchUpload currentStep={currentStep}>
          <StepItem title="选择开票数据">
            <SelectInvoiceData
              location={location}
              setCurrentstep={this.setCurrentstep} // 当前的步数
              isCustSupp={invoiceState} // 1是客户开票，2是供应商开票，3是供应商系统的开票
            />
          </StepItem>
          <PerfectInvoiceInfo
            title="完善发票信息"
            currentStep={currentStep}
            setCurrentstep={this.setCurrentstep}
            nextFinish={this.nextFinish}
            InvoiceId={InvoiceId}
            contIdList={contIdList}
            costCenterIdList={costCenterIdList}
            custSuppId={custSuppId} // 客户id或者供应商id
            isCustSupp={invoiceState} // 1是客户开票，2是供应商开票，3是供应商系统的开票
            preStep={() => {
              this.setCurrentstep(currentStep - 1);
            }}
          />
          <InvoiceFinish
            title="完成"
            setCurrentstep={this.setCurrentstep}
            invApplyData={invApplyData}
          />
        </BatchUpload>
      </PageHeaderWrapper>
    );
  }
}
export default BillingList;
